今天要來講 金魚都能懂的這個網頁畫面怎麼切: No.001 - 圖文滿版區塊

未來的程式碼範例，前面都會有一個 css reset

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box
}

之後就不會特別附註上去，至於為什麼要 reset，
可以看 這個金魚。

本篇關鍵字

• background
• linear-gradient

範例檔

(背景圖片: Kate Stone Matheson from Unsplash)

HTML

<div class="banner">
  <h2>Zombie@Dump</h2>
</div>

CSS

.banner {
  width: 100%;
  height: 600px;
  background: linear-gradient(15deg, rgba(177, 120, 68, .6) 25%, transparent 25%), 
  linear-gradient(315deg, rgba(177, 120, 68, .6) 30%, transparent 30%),
  url('https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1342&q=80')no-repeat center top/cover;
  position: relative;
}

.banner h2 {
  color: white;
  font-size: 50px;
  position: absolute;
  left: 40px;
  bottom: 20px;
}

喪屍分解

• 使用background 搭配 , 來達成多重背景的設定，要蓋在上面的要寫在前面
  ( 支援度： https://caniuse.com/multibackgrounds )
• 使用linear-gradient 來達成畫面分割的效果
• 與 background 有關的 CSS

  background-color
  background-image
  background-position
  background-repeat
  background-size
  background-attachment
  

• background 簡寫：

  /* background : background-image  background-attachment background-repeat background-position/background-size */
  background: url('logo.png') fixed no-repeat center center/cover;
  

• linear-gradient 如何用
  • linear-gradient(角度, 顏色1 %, 顏色2 %, ...)
  • 線上生成網站

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是如何不使用多重背景。